<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>

    <!-- 使用 link 指定标题栏小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- 使用 link 链接外部样式文件 -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="mi-header.css">
</head>

<body>

    <!-- 最顶端的导航条区域 -->
    <div class="layout-wrapper site-topbar">
        <div class="layout-center site-topbar-center">

            <!-- 顶部导航条 -->
            <div class="site-topbar-nav">
                <a rel="nofollow" href="//www.mi.com/index.html">小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//qiye.mi.com/" target="_blank">企业团购</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank" id="J_siteDownloadApp" class="topbar-download">
                    下载app</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="https://xiaomishare.mi.com/?from=micom" target="_blank">智能生活</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion">Select Location</a>
            </div>
            <!-- 顶部导航条结束 -->

            <!-- 顶部购物车 -->
            <div class="site-topbar-cart">
                <a rel="nofollow" href="#">
                    <em class="iconfont-cart"></em>
                    <em class="iconfont-cart-full hide"></em> 购物车
                    <span class="cart-mini-num J_cartNum">（0）</span>
                </a>
            </div>

            <!-- 顶部信息条 -->
            <div class="site-topbar-info">
                <a rel="nofollow" href="//order.mi.com/site/login?redirectUrl=https://www.mi.com/">登录</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//account.xiaomi.com/pass/register">注册</a>
                <span class="sep">|</span>
                <span class="message">
                        <a rel="nofollow" class="J_needAgreement" >消息通知</a>
                    </span>
            </div>

        </div>
    </div>

    <!-- LOGO区域 ( 包含商品分类 和 搜索框 ) -->
    <div class="layout-wrapper site-header">
        <div class="layout-center site-header-center">
            <!-- 头部LOGO -->
            <div class="site-header-logo">
                <a href="http://www.mi.com" class="logo"></a>
            </div>
            <!-- 头部导航条 -->
            <!-- site-header-nav 采用 相对定位(但不移动位置)，目的是让 site-category 先对该元素进行定位 -->
            <div class="site-header-nav">
                <ul class="site-header-nav-list">
                    <li class="site-header-nav-list-category">
                        <div class="site-category"></div>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">小米手机</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">Redmi红米</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">电视</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">笔记本</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">家电</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">路由器</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">智能硬件</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">服务</a>
                    </li>
                    <li class="site-header-nav-list-item">
                        <a href="#" class="link">社区</a>
                    </li>
                </ul>
            </div>
            <!-- 头部搜索框 -->
            <div class="site-header-search">
                <form action="#" class="site-header-search-form">
                    <a class="site-header-search-form-input">
                        <input type="text">
                    </a>
                    <a class="site-header-search-form-submit">
                        <button type="submit" class="fa fa-search"></button>
                    </a>
                </form>
            </div>
        </div>
    </div>

    <div class="layout-wrapper home-hero">
        <div class="layout-center home-hero-center">
            <div class="home-hero-swiper">
                <dl>
                    <dt></dt>
                    <dd>
                        <a href="#"><img src="heisha.jpg"></a>
                    </dd>
                    <dt></dt>
                    <dd>
                        <a href="#"><img src="redmi-max.webp"></a>
                    </dd>
                    <dt></dt>
                    <dd>
                        <a href="#"><img src="redmi-k30s.webp"></a>
                    </dd>
                    <dt class="home-hero-swiper-active"></dt>
                    <dd>
                        <a href="#"><img src="redme-notebook.webp"></a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>

    <!-- 使用 script 标签 引入外部的 JavaScript 脚本文件  -->
    <script type="text/javascript" src="swiper.js"></script>

</body>

</html>